<template>
    <el-dialog v-model="visible" :title="title" :width="width" @closed="resetForm" @open="init"
               :close-on-press-escape="false">
        <el-form :model="obj" ref="formRef" :rules="rules" label-position="left" label-width="100px"
                 label-suffix="：">
            <el-form-item label="编号" prop="id" style="display: none"/>
            <el-row>
                <el-col :span="12" class="grid-cell">
                    <el-form-item label="物品名称" prop="name" class="required">
                        <el-input v-model="obj.name" type="text" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                    <el-form-item label="物品编码" prop="code" class="required">
                        <el-input v-model="obj.code" type="text" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="grid-cell">
                    <el-form-item label="规格:" prop="spec" class="required">
                        <el-input v-model="obj.spec" type="text" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                    <el-form-item label="状态" prop="enabled" class="required">
                        <el-radio-group v-model="obj.enabled">
                            <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value"
                                      :disabled="item.enabled" style="{display: inline}">{{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="grid-cell">
                    <el-form-item label="数量" prop="num">
                        <el-input-number :min="0" v-model="obj.num" type="text" clearable></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                    <el-form-item label="物品单价" prop="unitPrice" class="required">
                        <el-input-number v-model="obj.unitPrice" controls-position="right" :min="0" :precision="2" :step="0.1" clearable></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="grid-cell">
                    <el-form-item label="类别" prop="gsClassifyId" class="required">
                        <el-radio-group v-model="obj.gsClassifyId">
                            <el-radio v-for="(item, index) in gsClassifyOptions" :key="index" :label="item.value" :disabled="item.gsClassifyId" style="{display: inline}">
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button type="default" @click="visible=false">取消</el-button>
            <template v-if="type===0">
                <el-button type="primary" @click="submitAdd">确认添加</el-button>
            </template>
            <template v-else>
                <el-button type="primary" @click="submitUpdate">确认修改</el-button>
            </template>
        </template>
    </el-dialog>
</template>

<script>
import {ElMessage} from "element-plus";
import {
    defineComponent,
    toRefs,
    reactive,
    getCurrentInstance, ref
}
    from 'vue'
import {addGoods, hasSameCodeGs, updateGs} from "../../../../../network/adm/gs";

export default {
    name: "GsForm",
    emits: ['refresh-data'],
    props: {width: ''},
    setup(props,{emit}){
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const visible =  ref(false);
        const formRef = ref(null);
        const validateGsCode = (rule,value,callback)=>{
            hasSameCodeGs({
                id: form.obj.id,
                code: value
            }).then(vo=>{
                if(vo){
                    callback(new Error('已存在相同编码的物品'))
                }
                callback();
            })
        }
        const form = reactive({
            obj:{
                id: null,
                name: null,
                code: null,
                spec: null,
                enabled: 1,
                num: 1,
                unitPrice: null,
                gsClassifyId: 2
            },
            rules:{
                name: [{
                    required: true,
                    message: '物品名称不可为空',
                }],
                code: [
                    {required: true, message: '物品编号不可为空'},
                    {validator: validateGsCode,trigger: 'blur'}
                ],
                spec: [{
                    required: true,
                    message: '物品规格不可为空',
                }],
                enabled: [{
                    required: true,
                    message: '物品状态不可为空',
                }],
                num: [{
                    required: true,
                    message: '字段值不可为空',
                }],
                unitPrice: [{
                    required: true,
                    message: '物品价格不可为空',
                }],
                gsClassifyId: [{
                    required: true,
                    message: '字段值不可为空',
                }],
            },
            statusOptions: [
                {
                    "label": "正常",
                    "value": 1
                }, 
                {
                    "label": "停用",
                    "value": 2
                }
            ],
            gsClassifyOptions: [
                {
                    "label": "消耗品",
                    "value": 1
                },
                {
                    "label": "耐用品",
                    "value": 2
                }
            ],
            setObj({id,name,code, spec, enabled, num, unitPrice, gsClassifyId}){
                form.obj.id = id;
                form.obj.name = name;
                form.obj.code = code;
                form.obj.spec = spec;
                form.obj.enabled = enabled;
                form.obj.num = num;
                form.obj.unitPrice = unitPrice;
                form.obj.gsClassifyId = gsClassifyId;
            },
            submitAdd() {
                formRef.value.validate((valid)=>{
                    if(valid){
                        addGoods(form.obj).then(data => {
                            globalProperties.$response.handle({
                                data: data,
                                success: '新增成功',
                                error: '新增失败',
                                successFn: () => {
                                    emit('refresh-data')//刷新数据表格
                                    visible.value = false;
                                },
                                log: '新增结果'
                            })
                        })
                    }else{
                        ElMessage.error('请先完善表单内容!');
                    }
                })
            },
            submitUpdate(){
                formRef.value.validate((valid)=>{
                    if(valid){
                        updateGs(form.obj).then(data => {
                            globalProperties.$response.handle({
                                data: data,
                                success: "修改成功",
                                error: '修改失败',
                                successFn: () => {
                                    emit('refresh-data');
                                    visible.value = false;
                                }
                            })
                        })
                    }else{
                        ElMessage.error('请先完善表单内容!');
                    }
                })
            },
            resetForm(){
                formRef.value.resetFields();
                formRef.value.clearValidate();
                // console.log('销毁后表单数据：',form.obj);
            }
        })
        return {
            ...toRefs(form),
            formRef,
            visible
        }
    },
    data() {
        return {
            type: 0,//0为添加表单，1为修改表单
            title: '',//表单名称
        }
    },
    methods: {
        init() {
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
.el-select-dropdown__item {
    width: 100%;
}

.el-cascader-node {
    width: 100%;
}

.explain {
    font-size: 12px;
    color: #a1a1a1;
}
</style>
<style>
.el-cascader-node {
    width: 100%;
}

.el-scrollbar__view {
    width: 180px;
}
</style>
<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
    width: 100% !important;
}

.el-form-item--medium {
    .el-radio {
        line-height: 36px !important;
    }

    .el-rate {
        margin-top: 8px;
    }
}

.el-form-item--small {
    .el-radio {
        line-height: 32px !important;
    }

    .el-rate {
        margin-top: 6px;
    }
}

.el-form-item--mini {
    .el-radio {
        line-height: 28px !important;
    }

    .el-rate {
        margin-top: 4px;
    }
}

.clear-fix:before,
.clear-fix:after {
    display: table;
    content: "";
}

.clear-fix:after {
    clear: both;
}

.float-right {
    float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
    table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;

        td.table-cell {
            display: table-cell;
            height: 36px;
            border: 1px solid #e1e2e3;
        }
    }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
    text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
    text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
    text-align: right;
}

.custom-label {
}

.static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    ::v-deep .el-divider--horizontal {
        margin: 0;
    }
}
</style>
